import { PageContainer } from '@ant-design/pro-layout';
import { useState } from 'react';
import OrderList from './OrderList';
import MergeList from './RecordList';

const MergeOrderPage = () => {
  const [tab, setTab] = useState<'order' | 'merge'>('order');
  return (
    <PageContainer
      header={{
        breadcrumb: {
          routes: [
            { path: '/', breadcrumbName: '首页' },
            { path: '/parking-orders', breadcrumbName: '订单管理' },
            {
              path: '/parking-orders/merge',
              breadcrumbName: '订单合并',
            },
          ],
        },
        subTitle: '请输入「车牌号」以搜索需要合并的订单',
      }}
      tabList={[
        {
          tab: '订单合并',
          key: 'order',
        },
        {
          tab: '合并记录',
          key: 'merge',
        },
      ]}
      tabActiveKey={tab}
      onTabChange={(key) => setTab(key as 'order' | 'merge')}
    >
      {tab == 'order' && <OrderList />}
      {tab == 'merge' && <MergeList />}
    </PageContainer>
  );
};

export default MergeOrderPage;
